<template>
  <div>
    <el-radio-group v-model="radio" @change="selectRoles">
      <el-radio label="">所有英雄</el-radio>
      <el-radio label="fighter">战士</el-radio>
      <el-radio label="mage">法师</el-radio>
      <el-radio label="assassin">刺客</el-radio>
      <el-radio label="marksman">射手</el-radio>
      <el-radio label="support">辅助</el-radio>
    </el-radio-group>
    <!-- <el-button type="success" @click="saveHeros">保存英雄</el-button> -->
    <el-divider></el-divider>
    <el-row>
      <el-col
        :span="4"
        v-for="hero in heros"
        v-bind:key="hero.id"
        style="padding: 5px"
      >
        <el-card :body-style="{ padding: '0px' }">
          <img :src="hero.src" class="image" />
          <div style="width: 100%; text-align: center; padding-bottom: 5px">
            {{ hero.title }}
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "heros",
  components: {},
  data() {
    return {
      form: {},
      radio: "",
      heros: [],
    };
  },
  created() {
    this.getHeros();
  },
  methods: {
    selectRoles() {
      console.log("radio:", this.radio);
      let that = this;
      if (this.radio === "") {
        this.getHeros();
        return;
      } else {
        this.$db.heros.find(
          { roles: { $elemMatch: that.radio } },
          function (err, docs) {
            console.log("heros geted:", docs);
            that.heros = docs;
          }
        );
        return;
      }
    },
    getHeros() {
      let that = this;
      // 更新刀妹
      this.$db.heros.update(
        { _id: "YYhh3CeMen0tGc3Y" },
        { "name": "刀锋舞者", "heroId": "39", "alias": "Irelia", "title": "艾瑞莉娅", "src": "https://game.gtimg.cn/images/lol/act/img/champion/Irelia.png", "roles": ["fighter", "assassin"], "keywords": "刀锋舞者,艾瑞莉娅,女刀,刀妹,女刀锋,Irelia,nd,ndf,dfwz,arly,daofengwuzhe,airuiliya,nvdao,nvdaofeng", "_id": "YYhh3CeMen0tGc3Y" },
        {},
        function () {
        }
      );
      this.$db.heros.find({}, function (err, docs) {
        // console.log("heros geted:", docs);
        that.heros = docs;
      });
    },
  },
};
</script>

<style>
.image {
  width: 100%;
  height: 100%;
}
</style>
